import React, { useRef, useState, useContext, useEffect } from 'react'
import {
  View,
  Text,
  StyleSheet,
  StyleProp,
  ViewStyle,
  Pressable,
  TextInput,
} from 'react-native'
import { common } from '../assets/style/common'
import SearchTxtSwiper from './searchTxtSwiper'
import { LinearGradient } from 'expo-linear-gradient'
import { NavigationContext, useRoute } from '@react-navigation/native'

interface SearchTxtProp {
  style?: StyleProp<ViewStyle>
  showButton?: boolean
  showMenu?: boolean
  placeholder?: string
  placeholderSwiper?: boolean
  isInput?: boolean
  onSearchByKey?: (txt: string) => void
  initTxtNptValue?: string
}
export default function SearchTxt(props: SearchTxtProp) {
  const {
    showButton = true,
    placeholderSwiper = true,
    placeholder = '',
    isInput = false,
  } = props
  const route = useRoute()
  const navigation = useContext(NavigationContext)
  const searchTxtSwiperRef: any = useRef()
  const textInputRef = useRef<TextInput>(null)
  const [value, SetValue] = useState('')
  useEffect(() => {
    SetValue(props.initTxtNptValue || '')
  }, [props.initTxtNptValue])
  function onSearch() {
    route.name !== 'GoodSearch' &&
      navigation?.navigate('GoodSearchWrap', {
        screen: 'GoodSearch',
        params: {
          value: searchTxtSwiperRef.current.value().value,
        },
      })
    onSubmitEditing()
  }
  function onSubmitEditing() {
    textInputRef.current?.blur()
    props.onSearchByKey && props.onSearchByKey(value)
  }
  return (
    <View style={[styles.nptWrap, common.flexCol, props.style]}>
      <Text style={styles.nptIcon}>&#xe60a;</Text>
      {placeholderSwiper ? (
        <SearchTxtSwiper ref={searchTxtSwiperRef} height={32} />
      ) : isInput ? (
        <TextInput
          ref={textInputRef}
          onSubmitEditing={onSubmitEditing}
          style={styles.nptTxt}
          placeholder={props.placeholder}
          cursorColor="#999999"
          placeholderTextColor={'#999'}
          value={value}
          onChangeText={text => SetValue(text)}
        />
      ) : (
        <Text style={styles.nptPld}>{placeholder}</Text>
      )}
      {showButton && (
        <Pressable onPress={onSearch}>
          <LinearGradient
            colors={['#f392a6', '#fee68d']}
            start={{ x: 0.8, y: 1 }}
            end={{ x: 0.1, y: 0.1 }}
            style={styles.nptIBtn}
          >
            <Text style={StyleSheet.compose(styles.nptITxt, common.flexCol)}>
              搜索
            </Text>
          </LinearGradient>
        </Pressable>
      )}
    </View>
  )
}
const styles = StyleSheet.create({
  nptWrap: {
    height: 32,
    width: '100%',
    borderRadius: 16,
    backgroundColor: '#fff',
    paddingRight: 2,
    paddingLeft: 12,
  },
  nptIcon: {
    fontSize: 14,
    fontFamily: 'iconfont',
    marginRight: 6,
    color: '#f392a6',
  },
  nptITxt: {
    fontSize: 12,
    lineHeight: 26,
    height: '100%',
    color: '#fff',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  nptIBtn: {
    height: 28,
    width: 56,
    borderRadius: 14,
  },
  nptTxt: {
    flex: 1,
    color: '#333',
    fontSize: 14,
  },
  nptPld: {
    flex: 1,
    color: '#999',
    fontSize: 14,
  },
})
